<template>
  <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange" class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#33302D' }">
    <el-table-column type="selection" width="55" />
    <el-table-column label="客户信息">
      <template #default="scope">
        <div class="cusInfo">
          <el-image :src="scope.row.avatar" fit="cover" class="avatar">
            <template #error>
              <div class="image-slot">
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
          <div class="name">{{ scope.row.name }}</div>
          <div class="sex">
            <img src="@/assets/customer/unknown.png" alt="" v-if="scope.row.sex === 0" />
            <img src="@/assets/customer/man.png" alt="" v-if="scope.row.sex === 1" />
            <img src="@/assets/customer/girl.png" alt="" v-if="scope.row.sex === 2" />
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column property="mobile" label="手机号" width="120" />
    <el-table-column label="客户标签" show-overflow-tooltip>
      <template #default="scope">
        <el-popover v-if="scope.row.tag_info.length > 5" :width="300" trigger="hover" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
          <template #reference>
            <div class="tagList">
              <div class="tag_item" v-for="tagItem in scope.row.tag_info" :key="tagItem.id">
                {{ tagItem.name }}
              </div>
            </div>
          </template>
          <template #default>
            <div class="conceal" :style="style">
              <div class="conceal_tag_item" :style="tagStyle" v-for="tagItem in scope.row.tag_info" :key="tagItem.id">
                {{ tagItem.name }}
              </div>
            </div>
          </template>
        </el-popover>
        <div class="tagList" v-else>
          <div class="tag_item" v-for="tagItem in scope.row.tag_info" :key="tagItem.id">
            {{ tagItem.name }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column property="add_staff" label="添加人" width="150" />
    <el-table-column property="created_at" label="添加时间" width="200" />
    <el-table-column property="lost_time" label="最近删除时间" width="200" />
    <el-table-column property="loss_warn" label="流失预警" width="150px" />
    <el-table-column label="操作">
      <template #default="scope">
        <div class="handle">
          <div class="btn_item" @click="detail(scope.row)">详情</div>
          <div class="btn_item" @click="remind(scope.row)">一键提醒</div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 一键提醒弹框 -->
  <el-dialog v-model="dialogVisible" title="一键提醒" width="30%" :before-close="handleClose">
    <span>{{ lossInfo.name }}已流失，提醒员工{{ lossInfo.addStaff }}等重新添加及时处理</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <ZWPagination @submit="page" ref="PaginationRef"></ZWPagination>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { ElMessage, ElTable } from 'element-plus'
  import { getCusLossList, exportCusList } from '@/api/customerCenter'
  import router from '@/router'
  import ZWPagination from '@/components/ZWPagination.vue'
  import { useStore } from '@/store'
  const store = useStore()

  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const dialogVisible = ref(false)
  const params = {
    reason: '-1'
  }
  const customer = ref([]) // 选中的流失客户
  const lossInfo = reactive({
    name: '',
    addStaff: ''
  })
  const handleSelectionChange = (val: any) => {
    customer.value = val
  }
  const tableData = ref([])
  // 详情
  const detail = (row: any) => {
    router.push(`/customer/manage/list/detail?id=${row.id}`)
  }
  // 一键提醒
  const remind = (row: any) => {
    dialogVisible.value = true
    lossInfo.name = row.name
    lossInfo.addStaff = row.add_staff
  }
  // 获取流失客户列表数据
  const getCusLoss = (params?: any) => {
    getCusLossList(params).then((data: any) => {
      tableData.value = data.data
      store.dispatch('pageTotal', data.total)
    })
  }
  // 导出客户
  const exportCus = () => {
    if (customer.value.length > 0) {
      const arr: any = []
      customer.value.map((item) => {
        arr.push(item.id)
      })
      const params = {
        cust_Ids: Array.isArray(arr) ? arr.join(',') : []
      }
      exportCusList(params).then((res: any) => {
        window.location = res.file_url
      })
    } else {
      ElMessage.error('请选择流失客户')
      return false
    }
  }
  // 分页信息
  const page = (data: any) => {
    const params = {
      page_size: data.page_size,
      page: data.page,
      reason: '-1'
    }
    getCusLoss(params)
  }
  getCusLoss(params)
  defineExpose({
    getCusLoss,
    exportCus
  })
</script>
<style scoped lang="scss">
  .tableData {
    //   padding: 0 0 0 12px;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    .cusInfo {
      display: flex;
      align-items: center;
      .avatar {
        width: 36px;
        height: 36px;

        .image-slot {
          .el-icon {
            font-size: 36px;
          }
        }
      }
      .name {
        margin: 0 10px;
      }
      .sex {
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .handle {
      display: flex;
      align-items: center;
      .btn_item {
        width: 80px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 12px;
        }
      }
    }
    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag_item {
        padding: 4px;
        color: #ff6b00;
        margin: 0 10px 10px 0;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        &:nth-child(n + 6) {
          display: none;
        }
      }
    }
  }
  .conceal {
    display: flex;
    flex-wrap: wrap;
    &_tag_item {
      padding: 4px;
      color: #ff6b00;
      margin: 0 10px 10px 0;
      border-radius: 2px;
      border: 1px solid #ffc69e;
    }
  }
</style>
